<template>
	<div class="progressBox">
		<div class="rela font-12" :style="{color:titleColor}">
			{{title}}
			<span class="abso" :style="{color:percentageColor}">
				{{showtextVal}} %
				<img :src="require('../../assets/images/'+icon+'.png')" class="trendImg">
			</span>
		</div>
		<el-progress :percentage="percentage" :show-text="showtext" :stroke-width="strokeWidth" class="margin-t-10"></el-progress>
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			percentage: {
				type: Number,
				default: 0
			},
			showtext: {
				type: Boolean,
				default: false
			},
			showtextVal: {
				type: [String, Number],
				default: ''
			},
			strokeWidth: {
				type: Number,
				default: 10
			},
			icon: {
				type: String,
				default: ''
			},
			titleColor: {
				type: String,
				default: ''
			},
			percentageColor: {
				type: String,
				default: ''
			},
			trendImgColor: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: ''
			}
		},
	}
</script>

<style lang="less" scoped>
	.progressBox{
		span{
			right: 0;
			.trendImg{ 
				width: 10px;
				margin-left: 5px;
			}
		}
	}
</style>
